import React from "react";
import { Box, Flex, Text } from "@chakra-ui/react";
import { FaWeibo } from "react-icons/fa";
import { IoLogoWechat } from "react-icons/io5";

export default function Footer (props) {
  return (
    <Box position="relative" mt="50px" textAlign="center">
      <Text
        fontSize="12px"
        color="#B5B5B5"
        mb="5px"
        _before={{
          content: "''",
          borderTop: "1px solid #b5b5b5",
          display: "block",
          position: "absolute",
          width: "60px",
          top: "9px",
          left: "30px",
        }}
        _after={{
          content: "''",
          borderTop: "1px solid #b5b5b5",
          display: "block",
          position: "absolute",
          width: "60px",
          top: "9px",
          right: "30px",
        }}
      >
        {props.login ? '社交账号登录' : '社交帐号直接注册'}
      </Text>
      <Flex mb="10px" w="300px" h="50px" align="center" justify="center">
        <Box mx="25px" display={props.login ? "block" : "none"}>
          <FaWeibo color="red" fontSize="30px" cursor="pointer" />
        </Box>
        <Box mx="25px">
          <IoLogoWechat color="#42c02e" fontSize="32px" cursor="pointer" />
        </Box>
        <Box mx="25px">
          <svg
            t="1610768575453"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4250"
            width="27"
            height="27"
            cursor="pointer"
          >
            <path
              d="M931.396342 597.895516c-18.412522-49.611518-90.528235-161.621029-91.551153-217.881514h-0.511459c0-3.068754 0.511459-6.137507 0.511459-9.206261 0-204.583581-146.78872-370.807741-327.845189-370.807741-181.056469 0.511459-327.845189 166.22416-327.845189 371.3192 0 3.068754 0.511459 6.137507 0.511459 9.206261h-0.511459c-1.022918 56.260485-72.627171 168.269996-91.551153 217.881514-18.923981 49.611518-23.527112 99.223037-14.832309 139.116835 8.694802 39.382339 15.855228 63.932369 24.038571 71.604254s15.855228 16.366687 40.405257-1.534377c19.946899-16.366687 41.428175-49.611518 41.428175-49.611518s17.901063 51.657354 57.794862 91.551152c-31.198996 14.83231-76.718843 47.565683-79.787597 69.558418-3.068754 21.481276 47.565683 102.80325 166.735619 104.849085 119.169936 1.534377 158.552275-49.611518 162.643947-53.70319 11.252097-11.763556 20.458358-18.923981 20.458358-18.923981s9.71772 7.160425 20.458358 18.923981c4.091672 4.091672 43.474011 55.749026 162.643947 53.70319 119.169936-2.045836 169.804372-83.367809 166.735619-104.849085-3.068754-21.481276-48.588601-54.726108-79.787597-69.558418 39.893798-39.382339 57.794862-91.551153 57.794862-91.551152s21.481276 33.244832 41.428175 49.611518c24.55003 17.389604 32.221914 9.206261 40.405258 1.534377 8.183343-7.671884 15.343769-32.221914 24.03857-71.604254 9.71772-39.893798 4.603131-90.016776-13.809391-139.628294z"
              fill="#369BCE"
              p-id="4251"
            ></path>
          </svg>
        </Box>
      </Flex>
    </Box>
  );
}
